<template>
   <el-container>
  <el-header>
    <el-row>
        <el-col :span="2"> 
             <div class="tu"></div>
            <!-- <h2>后台管理系统</h2> -->
        </el-col>
          <el-col :span="14"> 
             <!-- <div class="tu"></div> -->
            <h2>后台管理系统</h2>
        </el-col>
        <el-col class="you" :span="8" style="text-align:right">  <el-button type="primary" @click="out">退出</el-button>
        </el-col>
      </el-row>
  </el-header>
  <el-container>
    <el-aside :width="is?'70px':'200px'">
        <myZuo @suofn='suo'></myZuo>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import myZuo from "@/components/myZuo"
export default {
    components:{myZuo},
    data() {
        return {
            is:false,
        };
    },
    methods: {
       suo(v){
         this.is=v
       },
       out(){
         sessionStorage.removeItem('token')
         this.$router.push('/login')
       }
    },
    mounted() {

    },


    computed:{

    },


    watch:{

cart: {

handler(newValue) {

},
deep: true,

immediate:true,
},
    },
};
</script>

<style scoped lang='scss'>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }
  .el-row{
    height: 100%;
  }
  .el-col{
    height: 100%;
    display:flex;
    align-items: center;
  }
  .you{
     display:flex;
    align-items: center;
    justify-content:end;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  .el-container {
      width:100%;
    height: 100%;
  }
   .el-header{
    width: 100%;
    height: 100%;
    padding:0 30px;
  }
  h2{
    color: rgb(13, 13, 90);
    font-family: '楷体';
    font-size:30px;
  }
  .tu{
    width: 50px;
    height: 50px;
    border: 3px solid white;
    border-radius:50px;
    background:url('../../assets//img/3.png');
    background-size:100%;
  }
</style>
